<template>
    <div class=''>
        <Aside />
        <div id='cesiumContainer'></div>
        <div class='tools'></div>
    </div>

</template>
<script setup name='ActiveCZML'>
import { onMounted, onUnmounted } from 'vue'
import * as Cesium from 'cesium'
import Aside from '@/components/aside/Aside.vue'
Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0Y2YxYWFiOC1hMjkxLTQ3MmQtOTMzOC02ODQzNGYzZThjYmIiLCJpZCI6MTg0MTQwLCJpYXQiOjE3MDI0NDY4MDR9.Xax9xESQVAXXQgP_6OnWSj0AAvpwFh_FLQAxjdwfaZ0";
let viewer;

onMounted(() => {
    // 地球视图，底图加载
    viewer = new Cesium.Viewer('cesiumContainer', {
        //地形图层
        terrain: Cesium.Terrain.fromWorldTerrain(),
        //信息窗口
        infoBox: false,
        //home按钮
        homeButton: false,
        //控制查看器的显示模式
        sceneModePicker: false,
        // 是否显示图层选择
        baseLayerPicker: false,
        //帮助按钮
        navigationHelpButton: false,
        //全屏模式
        fullscreenButton: false,
        //播放动画
        // animation: false,
        //时间线
        // timeline: false,
        //显示查询按钮
        // geocoder: false,
    });
    // viewer.extend(Cesium.viewerCesiumInspectorMixin);
    // cesium基本设置
    function cesiumDefaultModel(viewer) {
        //隐藏cesium Icon-logo
        viewer.cesiumWidget.creditContainer.style.display = 'none';
        //帧率
        viewer.scene.debugShowFramesPerSecond = true;
        // cesium的默认视角
        Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(89.5, 20.4, 110.4, 61.2);
        // 抗锯齿
        viewer.scene.fxaa = true;
        viewer.scene.postProcessStages.fxaa.enabled = false;
        // 水雾特效
        viewer.scene.globe.showGroundAtmosphere = true;
        // 设置最大俯仰角，[-90,0]区间内，默认为-30，单位弧度
        viewer.scene.screenSpaceCameraController.constrainedPitch = Cesium.Math.toRadians(-20);
        viewer.scene.screenSpaceCameraController.autoResetHeadingPitch = false;
        viewer.scene.screenSpaceCameraController.inertiaZoom = 0.5;
        //设置缩放程度
        viewer.scene.screenSpaceCameraController.minimumZoomDistance = 50;
        viewer.scene.screenSpaceCameraController.maximumZoomDistance = 30000000;
        //设置视角缩放类型
        //设置鼠标操作
        viewer.scene.screenSpaceCameraController.zoomEventTypes = [
            Cesium.CameraEventType.RIGHT_DRAG,
            Cesium.CameraEventType.WHEEL,
            Cesium.CameraEventType.PINCH,
        ];
        viewer.scene.screenSpaceCameraController.tiltEventTypes = [
            Cesium.CameraEventType.MIDDLE_DRAG,
            Cesium.CameraEventType.PINCH,
            {
                eventType: Cesium.CameraEventType.LEFT_DRAG,
                modifier: Cesium.KeyboardEventModifier.CTRL,
            },
            {
                eventType: Cesium.CameraEventType.RIGHT_DRAG,
                modifier: Cesium.KeyboardEventModifier.CTRL,
            },
        ];
        //地形夸张 拉伸地形
        // viewer.scene.globe.terrainExaggeration = 1.0;
        //添加OMS 房屋
        // viewer.scene.primitives.add(await Cesium.createOsmBuildingsAsync())
        //添加瓦片坐标信息
        // viewer.imageryLayers.addImageryProvider(new Cesium.TileCoordinatesImageryProvider())
        // 将三维球定位到中国
        viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(103.84, 31.15, 17850000),
            orientation: {
                heading: Cesium.Math.toRadians(348.4202942851978),
                pitch: Cesium.Math.toRadians(-89.74026687972041),
                roll: Cesium.Math.toRadians(0)
            },
            complete: function callback() {
                // 定位完成之后的回调函数
            }
        });
    }
    cesiumDefaultModel(viewer); //调用方法

    const czml = [
        {
            id: "document",
            name: "CZML Point",
            version: "1.0",
        }, 
        {
            id: "point",
            availability: "2023-03-19T16:00:00Z/2023-03-19T16:01:00Z",
            billboard: {
                image: "../data/img/record.png",
                scale: 0.5,
            },
            position: {
                epoch: "2023-03-19T16:00:00Z",
                cartographicDegrees: [
                    0,
                    83.664969,
                    42.060507,
                    150000,
                    10,
                    92.790028,
                    33.30631,
                    150000,
                    20,
                    106.036082,
                    27.308647,
                    150000,
                    30,
                    107.9494, 38.221617,
                    150000,
                    40,
                    116.927281, 37.286748,
                    150000,
                    50,
                    117.221638, 45.264854,
                    150000,
                    60,
                    126.788232, 48.688259,
                    150000,
                ],
            },
            point: {
                color: {
                    rgba: [255, 255, 255, 128],
                },
                outlineColor: {
                    rgba: [255, 0, 0, 128],
                },
                outlineWidth: 3,
                pixelSize: 15,
            },
        },
    ];
    viewer.dataSources.add(Cesium.CzmlDataSource.load(czml));
})

onUnmounted(() => {
    viewer.destroy();
})
</script>
<style scoped></style>